<template>
  <div>
    <!-- 根据路由显示页面 -->
    <!-- 如果需要实现组件当中的a连接跳转 使用 router-link 标签的to属性 里面写需要跳转路由的path-->
    <!-- <router-link to="/">首页</router-link> -->
    <!-- 使用transition和animate.css 配合使用给路由切换 设置了好看的过度效果 -->

    <transition mode="out-in" enter-active-class="animate__animated animate__bounceInLeft" leave-active-class="animate__animated animate__backOutRight">
      <router-view />
    </transition>
    <!-- 默认的底部菜单 -->
    <van-tabbar route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/special">专题</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped></style>
